<!DOCTYPE html>
<html>
<head>
    <title>Calculator App Using Spring 4 WebSocket</title>
    <script src="resources/js/sockjs-0.3.4.js"></script>
    <script src="resources/js/stomp.js"></script>
    <script type="text/javascript">
	
        var stompClient = null; 

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('calculationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('calResponse').innerHTML = '';
        }

        function connect() {
            var socket = new SockJS('/commentvl/ws');
			stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);               
                /*stompClient.subscribe('/topic/showResult', function(calResult){
                	showResult(JSON.parse(calResult.body).result);
                });*/
                
                stompClient.subscribe('/user/queue/newpost', function(newpost){                	
                	getDataForUser(newPost);
                });
                
                stompClient.subscribe('/topic/posts', function(post){
                	
                });
            });
        }

        function disconnect() {
            stompClient.disconnect();
            setConnected(false);
            console.log("Disconnected");
        }
        
        function getDataForUser(dataForUser) {
        	//showResult(JSON.parse(calResult.body).result);
        	//alert (newpost.body);
        }
        
        function getDataBroadcast(dataForBroadcast) {
        	var arrayOfObjects = eval(post.body);
        	var len = arrayOfObjects.length;
        	
        	 var response = document.getElementById('calResponse');
             var p = document.createElement('p');
             p.style.wordWrap = 'break-word';
             p.appendChild(document.createTextNode('length : ' + Date.now() + '_'+ len));
             //response.appendChild(p);
             response.innerHTML = 'length : ' + Date.now() + '_'+ len;
        	
        	//alert (post.body);
        	//showPost(JSON.parse(post.body).result);
        }

        function sendNum() {
            var num1 = document.getElementById('num1').value;
            var num2 = document.getElementById('num2').value;
            stompClient.send("/app/ws", {}, JSON.stringify({ 'num1': num1, 'num2': num2 }));
        }

        function showResult(message) {
            var response = document.getElementById('calResponse');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }
        function showPost (message) {
        	//alert(message);
        }
        
        function getData() {
        	stompClient.send("/app/getPosts", {}, null);
        }
        
        function addPost() {
        	var post = {
    			"contents" : 'my post'
    		};
        	/*var options = {};
        	for (var i=0; i < post.length; i++){
        	  var key = post[i].name;
        	  var val = post[i].value;
        	  options[key] = val;
        	}*/
        	//var jsonString = JSON.stringify(options);
        	var jsonString = JSON.stringify(post);
        	alert (jsonString);        	
        	
            //stompClient.send("/app/addpost", {}, JSON.stringify({ 'contents': 'my contents' }));
        	stompClient.send("/app/addpost", {}, jsonString);
        }
    </script>
</head>
<body>
<noscript><h2>Enable Java script and reload this page to run Websocket Demo</h2></noscript>
<h1>Calculator App Using Spring 4 WebSocket</h1>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button><br/><br/>
    </div>
    <div id="calculationDiv">
        <label>Number One:</label><input type="text" id="num1" /><br/>
        <label>Number Two:</label><input type="text" id="num2" /><br/><br/>
        <button id="sendNum" onclick="sendNum();">Send to Add</button>
        <p id="calResponse"></p>
    </div>
    <div>
    	<button id="getData" onclick="getData();">Get Data</button>
    </div>
    
    <div>
    	<button id="addData" onclick="addPost();">Add Post</button>
    </div>
</div>
</body>
</html>